<template>
  <el-dialog v-dialogDrag title="特别说明事项" :visible="isShowAddDialog" width="60%" @close="dialogClose">
    <div>
      <el-radio v-model="radio" label="类型A" @change="radioAb(radio)"></el-radio>
      <div v-for="(item1, index) in FormData1" :key="index">
        <el-form ref="formDate1" :model="item1" label-width="60px">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="常用语:" prop="name">
                <el-select v-model="item1.name">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="内容:" prop="content">
                <el-input type="textarea" :rows="1" v-model="item1.content">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <br>
    <div>
      <el-radio v-model="radio" label="类型B" @change="radioAb(radio)"></el-radio>
      <el-button type="primary" size="mini" @click="add">自定义添加</el-button>
      <div v-for="(item, index) in FormData2" :key="index">
        <el-form ref="formDate2" :model="item" label-width="60px">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="常用语:" prop="name">
                <el-select v-model="item.name">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="内容:" prop="content">
                <div style="display:flex;">
                  <el-input type="textarea" :rows="1" v-model="item.content">
                  </el-input>
                  <el-button type="danger" size="mini" @click="del(index)" style="margin-left:20px">删除</el-button>
                </div>

              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>



    <el-button @click="dialogClose">取 消</el-button>
    <el-button type="primary" @click="submitForm()">确 定</el-button>

  </el-dialog>
</template>

<script>
export default {
  name:'WorkInformationadd',
  data () {
    return {
      radio: '',
      ab: '',
      FormData1: [],
      FormData2: [],
      options: [
        {
          label: '选项一',
          value: '选项一',
        }, {
          label: '选项二',
          value: '选项二',
        }, {
          label: '选项三',
          value: '选项三',
        }, {
          label: '选项四',
          value: '选项四',
        }
      ],
    };

  },
  props: {
    isShowAddDialog: {
      type: Boolean
    }
  },

  methods: {
    radioAb (value) {
      this.ab = value
    },
    add () {
      this.FormData2.push(
        {
          name: '',
          content: ''
        }
      )
    },
    del (index) {
      this.FormData2.splice(index, 1)
    },
    dialogClose () {
      this.$emit('dialogClose')
    },
    submitForm () {
      this.$emit('selectGroup')
    },
    selectAb () {
      if (this.ab == '类型A') {
        return this.FormData1
      }
      else {
        return this.FormData2
      }
    },
    getText () {
      for (var i = 0; i < 10; i++) {
        this.FormData1.push({
          name: '选项' + i,
          content: '内容' + i,
        })
      }
    }
  },
  mounted () {
    this.getText()
  }

}

</script>

<style scoped lang="less">
.el-radio {
  margin-bottom: 20px;

}
</style>
